<template>

    <a-form ref="formRef" :model="value" :rules="rules" :labelCol="{ style: { width: '120px' } }">
        <a-row :gutter="[24, 24]">

            <a-col :span="8">
                <a-form-item label="名称" name="name" required>
                    <a-input v-model:value="value.name" placeholder="请输入供应商名称" allowClear />
                </a-form-item>
            </a-col>

            <a-col :span="8">
                <a-form-item label="建立时间" name="createTime" required>
                    <a-date-picker v-model:value="value.createTime" valueFormat="YYYY-MM-DD HH:mm:ss"
                        style="width: 100%;" allowClear />
                </a-form-item>
            </a-col>




            <a-col :span="24">
                <a-form-item label="所在区域" name="streetCode" required>
                    <AreaInput :show-village="false" v-model:provinceCode="value.provinceCode"
                        v-model:provinceName="value.provinceName" v-model:cityCode="value.cityCode"
                        v-model:cityName="value.cityName" v-model:areaCode="value.areaCode"
                        v-model:areaName="value.areaName"></AreaInput>

                </a-form-item>
            </a-col>


            <a-col :span="24">
                <a-form-item label="备注信息" name="remark">
                    <a-textarea :maxlength="500" :showCount="true" v-model:value.trim="value.remark"
                        placeholder="请输入备注信息" :rows="5" />
                </a-form-item>
            </a-col>

            <a-col :span="24">
                <a-form-item label="图片上传" name="imgList">
                    <uploadImg v-model:list="value.imgList" :maxCount="3"></uploadImg>
                </a-form-item>

            </a-col>




        </a-row>
    </a-form>


</template>
<script setup lang="ts">
import type { Company } from '@/types/Company';
import { ref } from 'vue';

import uploadImg from '@/components/uploadImg.vue'

import { useTabStore } from '@/stores/tab'


import { useCompanyStore } from '@/stores/company'

import type { Rule } from 'ant-design-vue/es/form';
import AreaInput from '@/components/areaInput.vue';

const companyStore = useCompanyStore()
const tabStore = useTabStore()
const value = defineModel<Company>('value', { default: {} })
const formRef = ref()

const rules: Record<string, Rule[]> = {
    streetCode: [{
        required: true, trigger: 'change', validator: async () => {
            if (!value.value.provinceCode) {
                return Promise.reject("请选择省");
            }
            if (!value.value.cityCode) {
                return Promise.reject("请选择城市");
            }
            if (!value.value.areaCode) {
                return Promise.reject("请选择区县");
            }

            return Promise.resolve();
        },
    }],

};

const validate = async () => {
    await formRef.value.validate();
};
const resetFields = () => {
    formRef.value.resetFields();
};
defineExpose({
    validate,
    resetFields,
});
</script>
<style scoped></style>